import Cesium from '../Ces/Cesium'
import './ToolTip.css'

interface TooltipOptions {
  align?: string
  fontSize?: number
  pixelOffset?: number[]
  container?: HTMLElement
}

interface EarthPin {
  content: string
}

interface Position {
  x: number
  y: number
}

class Tooltip {
  private _visible: boolean
  private _target: HTMLElement | undefined
  public align: string
  public fontSize: number
  public pixelOffset: number[]

  constructor(options: TooltipOptions = {}) {
    this._visible = false
    this.align = options.align, 'right'
    this.fontSize = options.fontSize, 11
    this.pixelOffset = options.pixelOffset??[0, 0]
    if (!Cesium.defined(options.container)) {
      options = {}
    }
  }

  get target(): HTMLElement | undefined {
    return this._target
  }

  set content(value: string) {
    if (Cesium.defined(this._target)) {
      this._target.lastElementChild.innerHTML = value
    }
  }

  get visible(): boolean {
    return this._visible
  }

  set visible(value: boolean) {
    if (this._visible !== value && Cesium.defined(this._target)) {
      this._visible = value
      this._target.style.display = value ? 'block' : 'none'
    }
  }

  createGraph(container: HTMLElement | undefined, earthPin: EarthPin | undefined): HTMLElement {
    this._target = Tooltip.createWrapNode(this.align, this.fontSize)
    if (Cesium.defined(container)) {
      container.appendChild(this._target)
    }
    if (Cesium.defined(earthPin)) {
      this.content = earthPin.content
    }

    return this._target
  }

  static createWrapNode(align: string, fontSize: number): HTMLElement {
    const div = document.createElement('DIV')

    div.className = 'twipsy ' + align
    div.style['font-size'] = `${fontSize}px`

    const arrow = document.createElement('DIV')

    arrow.className = 'twipsy-arrow'
    div.appendChild(arrow)

    const title = document.createElement('DIV')

    title.className = 'twipsy-inner'
    div.appendChild(title)

    div.style.display = 'none'

    return div
  }

  showAt(position: Position | undefined, message: string | undefined): void {
    if (!this.target) return
    if (message) {
      this.content = message
    }
    if (position) {
      this.visible = true
      let left: number
      let top: number

      if (this.align === 'bottom') {
        left = position.x - (this.target?.clientWidth || 0) * 0.5
        top = position.y
      } else if (this.align === 'top') {
        left = position.x - (this.target?.clientWidth || 0) * 0.5
        top = position.y - (this.target?.clientHeight || 0)
      } else if (this.align === 'left') {
        left = position.x - (this.target?.clientWidth || 0)
        top = position.y - (this.target?.clientHeight || 0) * 0.5
      } else {
        left = position.x
        top = position.y - (this.target?.clientHeight || 0) * 0.5
      }
      const [offsetX, offsetY] = this.pixelOffset
      left += offsetX
      top += offsetY

      this.target.style.left = left + 'px'
      this.target.style.top = top + 'px'
    }
  }

  isDestroyed(): boolean {
    return false
  }

  destroy(): void {
    this._target?.remove()
    return Cesium.destroyObject(this)
  }
}

export default Tooltip
